<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易占比</span>
      </div>

      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="12">
          <div
            style="
              width: 100%;
              height: 500px;
              background-color: rgba(7, 123, 232, 0.05);
            "
            id="proportionChart1"
          ></div>
        </el-col>
        <el-col :span="12">
          <div
            style="
              width: 100%;
              height: 500px;
              background-color: rgba(255, 151, 0, 0.05);
            "
            id="proportionChart2"
          ></div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected proportion1: any = {
    p2p_total_qty: 0,
    central_total_qty: 0
  };
  @Prop()
  protected proportion2: any = {
    p2p_total_qty: 0,
    central_total_qty: 0
  };
  @Watch("proportion1", { deep: true })
  protected getData() {
    this.draw(
      "proportionChart1",
      this.proportion1.p2p_total_qty,
      this.proportion1.central_total_qty
    );
  }
  @Watch("proportion2", { deep: true })
  protected getData2() {
    this.draw(
      "proportionChart2",
      this.proportion2.p2p_total_qty,
      this.proportion2.central_total_qty
    );
  }
  protected created() {
    this.$nextTick(() => {
      this.draw(
        "proportionChart1",
        this.proportion1.p2p_total_qty,
        this.proportion1.central_total_qty
      );
      this.draw(
        "proportionChart2",
        this.proportion2.p2p_total_qty,
        this.proportion2.central_total_qty
      );
    });
  }
  private draw(id: string, p2pTotalQty: number, centralTotalQty: number) {
    const element: any = document.getElementById(id);
    // const element2: any = document.getElementById("proportionChart2");
    const myChart = Echarts.init(element);
    // const myChart2 = Echarts.init(element2);
    myChart.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: "center",
        data: ["集中交易", "分布式交易"]
      },
      color: ["#FFD400", "#077BE8"],
      series: [
        {
          type: "pie",
          radius: "65%",
          center: ["50%", "50%"],
          selectedMode: "single",
          data: [
            { value: p2pTotalQty, name: "集中交易" },
            { value: centralTotalQty, name: "分布式交易" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    });
    myChart.dispatchAction({
      type: "mousemove"
    });

    // myChart2.setOption({
    //   tooltip: {
    //     trigger: "item",
    //     formatter: "{a} <br/>{b} : {c} ({d}%)",
    //   },
    //   legend: {
    //     // orient: 'vertical',
    //     // top: 'middle',
    //     bottom: 10,
    //     left: "center",
    //     data: ["集中交易", "分布式交易"],
    //   },
    //   color: ["#FFD400", "#077BE8"],
    //   series: [
    //     {
    //       type: "pie",
    //       radius: "65%",
    //       center: ["50%", "50%"],
    //       selectedMode: "single",
    //       data: [
    //         { value: this.proportion2.p2p_total_qty, name: "集中交易" },
    //         { value: this.proportion2.central_total_qty, name: "分布式交易" },
    //       ],
    //       emphasis: {
    //         itemStyle: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 0, 0, 0.5)",
    //         },
    //       },
    //     },
    //   ],
    // });
    // myChart2.dispatchAction({
    //   type: "mousemove",
    // });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
</style>


